<script setup>
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
import { newsGetType } from '@/api/news.js'
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

const route = useRoute()
//栏目参数
const words = ref(route.params.words)

//新闻列表数据
const newsList = ref()
const newsListRows = ref()
//监听栏目参数变化获取对应的数据
watch(
  () => route.params.words,
  async (newWords) => {
    words.value = newWords
    const res = await newsGetType(1, words.value, '')
    newsList.value = res.data.data
    newsListRows.value = newsList.value.rows
  }
)
//初始化数据
onMounted(async () => {
  // 在组件挂载后自动获取数据
  const res = await newsGetType(1, words.value, '')
  newsList.value = res.data.data
  newsListRows.value = newsList.value.rows
})

// const images = ref(['/src/assets/login_bg.png'])

//跳转新闻详情
const router = useRouter()
const goDetail = (newsId) => {
  router.push({ name: 'newsDetail', params: { words: newsId } })
}

// 分页获取
// const currentpage = ref(1)
const handleCurrentChange = async (val) => {
  const res = await newsGetType(val, words.value, '')
  newsList.value = res.data.data
  newsListRows.value = newsList.value.rows
}
</script>

<template>
  <div class="big-box">
    <!-- 导航标签 -->
    <div style="margin-bottom: 20px; margin-top: 20px; text-align: left">
      <a style="font-size: 16px; color: #828181">天下新闻网 → {{ words }}</a>
    </div>
    <div v-if="newsListRows != null">
      <!-- 栏目新闻列表 -->
      <div v-for="news in newsListRows" :key="news.newsId">
        <!-- 分割线 -->
        <div class="divider"></div>
        <!-- 栏目新闻 -->
        <div class="news-box" @click="goDetail(news.newsId)">
          <img v-if="news.cover" :src="news.cover" class="news-image" />
          <img v-else src="/src/assets/login_bg.png" class="news-image" />
          <div style="text-align: left; max-width: 760px">
            <div style="font-size: 22px" class="text">
              【 {{ news.newsType }} 】{{ news.title }}
            </div>
            <div class="news-introduction">
              {{ news.newsContent }}
            </div>
            <div class="news-source">{{ news.userId }} | {{ news.publishTime }}</div>
          </div>
        </div>
      </div>
      <div>
        <el-pagination
          :page-size="1"
          :pager-count="11"
          layout="prev, pager, next"
          :total="newsList.pageNumber"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div v-else>暂无数据</div>
  </div>
</template>

<style scoped>
.big-box {
  display: flex;
  flex-direction: column;
  width: 1327px;
}
.divider::before {
  content: '';
  background-color: #c0c0c0;
  height: 0.5px;
  border-radius: 10px;
  display: block;
  margin: 0 auto; /* 居中显示 */
  display: block;
}
.news-image {
  width: 290px;
  height: 190px;
  border-radius: 6px;
  object-fit: cover; /* 设置图片的填充方式 */
  margin-right: 40px;
}

.text {
  transition: text-decoration 0.3s;
}

.text:hover {
  text-decoration: underline;
  color: #ec3742;
  cursor: pointer;
}
.news-box {
  display: flex;
  margin-bottom: 50px;
  margin-top: 50px;
}

.news-introduction {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  text-indent: 25px; /* 设置文本缩进 */
  line-height: 30px; /* 设置文本上下间隙 */
  color: #828181;
  /* 溢出内容的显示方式 */
  overflow: hidden;
  /* 文本溢出时的显示方式。
  当设置为 ellipsis 时，溢出的文本将以省略号（...）的形式显示*/
  text-overflow: ellipsis;
  /* 将对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 设置伸缩盒子子元素的排列方式 */
  -webkit-box-orient: vertical;
  /* 显示的行数 */
  -webkit-line-clamp: 3;
}

.news-source {
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 30px;
  color: #828181;
}
</style>
